<template>
    <!-- <div>
        商品列表
    </div> -->
    <panel title="商品列表">
        <el-form>
            <el-form-item label="商品名" label-width="80px" prop="name">
                <el-input placeholder="请输入商品" v-model="searchinfo.name"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="category" label-width="80px">
                <!-- v-model="add.category" -->
                <el-select placeholder="请选择" v-model="searchinfo.category">
                    <el-option :label="index.cateName" :value="index.cateName" v-for="index in categorys"
                        v-bind:key="index.id"></el-option>
                </el-select>
                <el-button @click="goodasearch" type="primary">搜索</el-button>
            </el-form-item>
        </el-form>



        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="商品ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="商品名">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="商品分类">
                            <span>{{ props.row.category }}</span>
                        </el-form-item>
                        <el-form-item label="商品价格">
                            <span>{{ props.row.price }}</span>
                        </el-form-item>
                        <el-form-item label="商品图片">
                            <!-- <span>{{ props.row.`http://1.15.179.44:3001` + imgUrl }}</span> -->
                            <img :src="`http://1.15.179.44:3001` + props.row.imgUrl" alt="">
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <template slot-scope="scope">
                                <span>{{ props.row.ctime | formatCtime }}</span>
                            </template>
                        </el-form-item>
                        <el-form-item label="商品评价">
                            <span>{{ props.row.rating }}</span>
                        </el-form-item>
                        <el-form-item label="商品销量">
                            <span>{{ props.row.sellCount }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述">
                            <span>{{ props.row.goodsDesc }}</span>
                        </el-form-item>

                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="name">
            </el-table-column>
            <el-table-column label="商品分类" prop="category">
            </el-table-column>
            <el-table-column label="商品价格" prop="price">
            </el-table-column>
            <el-table-column label="商品图片" prop="imgUrl">
                <template slot-scope="props">
                    <el-image :src="`http://1.15.179.44:3001${props.row.imgUrl}`" alt="">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="商品描述" prop="goodsDesc">
            </el-table-column>
            <el-table-column label="操作">
                <div slot-scope="scope">
                    <el-button size="mini" @click="clickEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </div>
            </el-table-column>

        </el-table>
        <div class="block">
            <el-pagination :page-sizes="[5, 10, 20, 30]" :page-size="pageinfo.pageSize"
                :current-page="pageinfo.currentPage" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @current-change="pageChange" @size-change="sizeChange">
            </el-pagination>
        </div>

        <el-dialog title="修改账户" :visible.sync="dialogFormVisible">

            <goodalistsunit type="edit" :defaultdata="curGoods" @success="success"></goodalistsunit>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <!-- <el-button type="primary">确 定</el-button> -->
            </div>
        </el-dialog>
    </panel>
</template>

<script>
import { goodslistReq, categoriesReq, goodseditReq } from '@/api/account.api'
import { clearObject } from '@/utils/common'
import dayjs from 'dayjs'
import axios from '@/utils/request'
import goodalistsunit from './components/goodsunit.vue'

export default {
    components: { goodalistsunit },
    data() {
        return {
            dialogFormVisible: false,
            categorys: [],
            pageinfo: {
                currentPage: 1,
                pageSize: 5
            },
            searchinfo: {
                name: '',
                category: ''
            },
            total: null,
            img: '',
            tableData: [],
            // 当前点击编辑的数据
            curGoods: {}
        }
    },
    created() {
        this.goodsData()
        categoriesReq().then((res) => {
            console.log(res.data);
            this.categorys = res.data


        })
    },

    methods: {

        // 弹框
        success(add) {
            goodseditReq(add).then((res) => {
                if (res.data.code === 0) {
                    this.goodsData()
                    this.dialogFormVisible = false

                }
            })
        },
        // formLabelWidth
        clickEdit(row) {
            // console.log(row, '----------');
            this.curGoods = row
            // console.log(this.form);
            this.dialogFormVisible = true
        },
        // 商品搜索
        async goodasearch() {
            let params = { ...this.pageinfo, ...this.searchinfo }
            clearObject(params)
            const res = await goodslistReq(params)
            this.tableData = res.data.data
            this.total = res.data.total
            console.log(res);
            console.log(params);
        },
        handleDelete(index, row) {
            this.$confirm('您是否确认删除该商品？', '删除提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消删除',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!',

                });
                axios.get('/goods/del', {
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    // this.getData()
                    this.goodsData()

                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        goodsData() {
            goodslistReq(this.pageinfo).then((res) => {
                this.tableData = res.data.data,
                    this.total = res.data.total


            })
        },
        pageChange(currentPage) {
            // 改变页码
            this.pageinfo.currentPage = currentPage
            // 重新调用getData
            this.goodsData()

        },
        sizeChange(pageSize) {
            // 改变页码
            this.pageinfo.pageSize = pageSize
            // 重新调用getData
            this.goodsData()

        },

    },
    filters: {
        formatCtime(ctime) {
            return dayjs(ctime).format('YYYY-MM-DD HH:mm:ss')
        }
    }

}
</script>

<style lang="less" scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}

/deep/ img {
    width: 50px;
    height: 50px;
}

.el-input {
    width: 300px;
    display: inline-block;
}


// .el-select {
//     display: inline-block;
// }

// .el-form-item__content {
//     width: 500px;
//     display: inline-block;
// }
</style>